import classNames from 'classnames'
import { ReactNode } from 'react'
import Styles from './index.module.scss'
// 继承原生input的注解
interface Props
  extends React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > {
  className?: any
  errMsg?: ReactNode
  validate?: ReactNode
}
export default function index({ className, errMsg, validate, ...rest }: Props) {
  return (
    <div className={Styles.root}>
      <div className="input-box">
        <input className={classNames(className)} {...rest} />
        {errMsg ? <div className="extra">{errMsg}</div> : null}
      </div>
      {validate ? <div className="validate">{validate}</div> : null}
    </div>
  )
}
